<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Expenses-total</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="format-detection" content="email=no,address=no,telephone=no" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/mediaFize.js"></script>
<script type="text/javascript" src="../js/util.js"></script>
<script type="text/javascript" src="../js/swiper-3.4.0.min.js"></script>
<script type="text/javascript" src="../js/weui.min.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/timer.js"></script>
<link type="text/css" rel="stylesheet" href="../css/home.css" />
<link type="text/css" rel="stylesheet" href="../css/swiper-3.4.0.min.css" />
<link type="text/css" rel="stylesheet" href="../css/weui.min.css" />
<style>
	#pageSwaper{
		padding-bottom: 0.9rem;
	}
	#main{
		overflow: hidden;
	}
	#youMain{
		overflow: hidden;
	}
	#main>div{
		margin-left:3% !important ;
	}
	#youMain>div{
		margin-left:3% !important ;
	}
</style>
</head>
<body>
<div id="pageSwaper">
	<div class="total_sum_bg">
		<div id="main"></div>
		<div id="youMain"></div>
	</div>	
</div>
<script>
	$(function(){
		$(".user_footer>ul>li").eq(1).find("a").addClass("active");
		$(".user_footer>ul>li").on("click",function(){
			var index=$(this).index();
			if(index==0){
				window.location.href="index.html";
			}
		})
		var minWidth=$(window).width();
		var minHeigth=$(window).height();
		$("#main").css({"width":minWidth,"height":minHeigth/2+"%"});
		$("#youMain").css({"width":minWidth,"height":minHeigth/1.5+"%"});
		var i=0;
		var colors=['#393939','#f5b031','#fad797','#59ccf7','#c3b4df'];  
		var myChart = echarts.init(document.getElementById('main'));
	    var option = {
	        title: {
	            text: '每个人目前为止的消费'
	        },
	        tooltip: {},
	        legend: {
	            data:[]
	        },
	        xAxis: {
	            data: ["熊聪","彭文","夏磊","潘鸿飞","操文健"]
	        },
	        yAxis: {},
	        series: [
		        {
		        	name: '',
		        	type: 'bar',
		        	itemStyle:{  
		                normal:{    
		                    color:function(){    
		                        return colors[i++];   
                        	},  
		                    label : {  
		                        show : false  
		                    },  
		                    labelLine : {  
		                        show : false  
		                    }  
		                },
		                emphasis : {  
		                    label : {  
		                        show : true,  
		                        position : 'center',  
		                        textStyle : {  
		                            fontSize : '20',  
		                            fontWeight : 'bold'  
		                        }  
		                    }  
		                }  
		            }, 
		        	data: [
		        		500, 600, -122, 854, 466
		        	],
		        	markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
		        },
	            
	        ]
	    };
	    myChart.setOption(option);
	
	    var youChart = echarts.init(document.getElementById('youMain'));
	    var youOption = {
	        title: {
	            text: '另附：消费类型比例'
	        },
	        series : [
	            {
	                name: '',
	                type: 'pie',
	                radius: '50%',
	                data:[
	                    {value:22, name:'买菜'},
	                    {value:7, name:'饮料'},
	                    {value:2, name:'聚餐吃饭'},
	                    {value:3, name:'生活用品'},
	                    {value:4, name:'电费'},
	                    {value:5, name:'水费'},
	                    {value:1, name:'外卖'},
						{value:1, name:'其他'},
	                ]
	            }
	        ]
	    };
	    youChart.setOption(youOption);
	});
</script>
</body>
</html>
